<template>
  <div style="position: relative">
    <div class="ball">
      <div class="inner"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.ball {
  position: absolute;
  top: 300px;
  left: 100px;
  animation: moveA 2s forwards;
  border-radius: 50%;
  /* border: 1px dotted black; */
}
.inner {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #fc5e56;
  animation: moveB .8s cubic-bezier(0.45, -0.76, 0.88, 0.41) forwards;
}
@keyframes moveA {
  to {
    transform: translateX(200px);
  }
}
@keyframes moveB {
  to {
    transform: translateY(300px);
  }
}
</style>